<template>
	<div class="container">
		<div class="jx-container">
      <el-form ref="form" :model="params_list" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="APP名称设置：" prop="consumerAppName">
                <el-input v-model="params_list.consumerAppName" placeholder="请输入客户端APP名称">
                </el-input>
                <span class="gray">设置客户端APP名称</span>
              </el-form-item>
              <el-form-item label="" prop="businessAppName">
                <el-input v-model="params_list.businessAppName" placeholder="请输入商户端APP名称">
                </el-input>
                <span class="gray">设置商户端APP名称</span>
              </el-form-item>
              <el-form-item label="平台客户电话：" prop="customerServicePhone">
                <el-input v-model="params_list.customerServicePhone" placeholder="请输入客户电话">
                </el-input>
              </el-form-item>
              <el-form-item label="合作单位：" style="margin-bottom: 0;">
                <div class="unit">
                  <div class="item-inline" v-for="(item,index) in params_list.partnerLogos" :key="index">
                    <async-example :item="item" :url="`${$api.common.upload}?catalog=setting_index`"></async-example>
                    <el-input v-model="item.logoName" placeholder="请输入单位名称"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-button class="jx-btn" type="primary" @click="addPartner">添加合作单位</el-button>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="关于我们：" prop="aboutAppConsumer">
                <el-input v-model="params_list.aboutAppConsumer" type="textarea" :row="4" placeholder="请输入首页介绍">
                </el-input>
                <span class="gray">首页关于简单介绍，用户端使用</span>
              </el-form-item>
              <el-form-item label="关于云途养护：" prop="aboutAppBusiness">
                <el-input v-model="params_list.aboutAppBusiness" placeholder="请输入H5链接">
                </el-input>
                <span class="gray">显示在商户端</span>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">确定</el-button>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
    components: {
      'async-example': () => import('./upload/index')
    },
		data() {
      const validateTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入客户电话'));
        } else {
          if (this.$reg.isPhone(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确电话号码'));
          }
        }
      }
			return {
        https: {
          list: this.$api.setting.index,
          common: this.$api.common.upload,
        },
        boo: {
          loading: false,
        },
        params_list: {partnerLogos: []},
        rules: {
          businessAppName: [{ required: true, message: '请输入商户户端APP名称', trigger: 'blur' }],
          consumerAppName: [{ required: true, message: '请输入客户端APP名称', trigger: 'blur' }],
          customerServicePhone: [{ required: true, validator: validateTel, trigger: 'blur' }],
          aboutAppConsumer: [{ required: true, message: '请输入首页介绍', trigger: 'blur' }],
          aboutAppBusiness: [{ required: true, message: '请输入链接', trigger: 'blur' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {}
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.params_list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      addPartner(){
        let _self = this
        _self.params_list.partnerLogos.push({
          logoImgUrl: '',
          logoName: '',
          logoImgId: '',
        })
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.saveing = true
            if(_self.params_list.partnerLogos.length == 0) return _self.$message.error('请填写合作单位')
            _self.params_list.partnerLogos.forEach(function(item){
              if(item.logoImgUrl == '') return _self.$message.error('请上传合作单位logo')
              if(item.logoName == '') return _self.$message.error('请填写合作单位名称')
            })
            let params = {
              consumerAppName: _self.params_list.consumerAppName,
              businessAppName: _self.params_list.businessAppName,
              customerServicePhone: _self.params_list.customerServicePhone,
              partnerLogos: _self.params_list.partnerLogos,
              aboutAppConsumer: _self.params_list.aboutAppConsumer,
              aboutAppBusiness: _self.params_list.aboutAppBusiness,
            }    
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                // _self.getList()
                _self.$message.success('基本设置成功')
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
            }
            _self.$axios.body(_self.https.list.add, params, success)   
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-form .el-input--small, .jx-form .el-textarea
    width: 665px
  .gray
    display: inline-block
  .jx-form /deep/ .el-form-item__label
    color: #333
  .unit
    display: flex
    flex-wrap: wrap 
    width: 80%
    .item-inline
      display: flex
      margin-right: 30px
      margin-bottom: 20px
      height: 50px
      line-height: 50px
      .el-input
        max-width: 200px
        margin-left: 15px
      .jx-btn
        margin-top: 12px
      /deep/ .jx-uploader
        .el-upload
          height: 45px
        img
          width: 45px
          height: 45px
        .avatar-uploader-icon
          width: 45px
          height: 45px
          line-height: 45px
</style>
